<template>
  <div class="member-help">
		<div>
			<h3 class="title">
					常用自助服务
			</h3>
		</div>
		<div class="container">
				<dl class="self-service-list">
						<dt class="ds-icon skyblue">
								<a href="javascript:;"><iconpark-icon name="preview-open"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">查询订单</a>
								</h3>
								<p class="text">
										快速查看订单详情、配送进度、确认收货等
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon skyblue">
								<a href="javascript:;"><iconpark-icon name="phone"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">我要催单</a>
								</h3>
								<p class="text">
										催发货、催配送、1小时快速答复
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon skyblue">
								<a href="javascript:;"><iconpark-icon name="send-one"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">配送服务查询</a>
								</h3>
								<p class="text">
										查看您所在地址支持的配送服务类型和时效
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon yellow">
								<a href="javascript:;"><iconpark-icon name="notepad"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">我的发票</a>
								</h3>
								<p class="text">
										申请发票补开、查询发票类型、开具详情
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon yellow">
								<a href="javascript:;"><iconpark-icon name="edit-two"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">申请售后</a>
								</h3>
								<p class="text">
										快速提交退换货/维修申请查看处理进度、退款记录
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon yellow">
								<a href="javascript:;"><iconpark-icon name="wallet-one"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">申请价格保护</a>
								</h3>
								<p class="text">
										申请价格保护（差价返还）、查询价保记录
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon greenyellow">
								<a href="javascript:;"><iconpark-icon name="delete-one"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">取消订单</a>
								</h3>
								<p class="text">
										申请取消订单、终止发货
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon greenyellow">
								<a href="javascript:;"><iconpark-icon name="lock"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">账户安全</a>
								</h3>
								<p class="text">
										修改密码、绑定/换绑手机、提高账户安全等
								</p>
						</dd>
				</dl>
				<dl class="self-service-list">
					<dt class="ds-icon greenyellow">
								<a href="javascript:;"><iconpark-icon name="funds"></iconpark-icon><br></a>
						</dt>
						<dd class="ds-content">
								<h3 class="ds-name">
										<a href="">金融问题</a>
								</h3>
								<p class="text">
										账户未进行实名认证，快速帮助您实名认证
								</p>
						</dd>
				</dl>
		</div>
		<Collapse />
	</div>
</template>
<script setup>
import Collapse from './collapse'

</script>
<style scoped lang="less">
.member-help {
  height: 100%;
  background: #fff;
}
.title {
  font-size: 20px;
  padding: 20px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 300px;
  .self-service-list {
    display: flex;
    align-items: center;
    width: 260px;
    .ds-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      iconpark-icon {
        font-size: 40px;
      }
    }
    .skyblue{
      background-color: skyblue;
    }
    .yellow{
      background-color: yellow;
    }
    .greenyellow{
      background-color: greenyellow;
    }
    .ds-content {
      width: 190px;
      .ds-name {
        color: #333;
      }
      .text {
        font-size: 12px;
        color: #999;
      }
    }

  }
}

</style>